<template>
  <div></div>
</template>

<script>
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";

//创建一个场景
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

//添加坐标轴
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);

//导入纹理
const textureLoader = new THREE.TextureLoader();
const ncepuTexture = textureLoader.load("ncepu.png");

//添加立方体
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({
  color: "#ffffff",
  map: ncepuTexture,
  transparent: false,
  side: THREE.DoubleSide,
});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

//设置相机位置
camera.position.z = 5;

//添加轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);

//设置时钟
const clock = new THREE.Clock();

//渲染场景
function animate() {
  requestAnimationFrame(animate);

  //控制立方体变换  按时间变换,跟踪时间

  let time = clock.getElapsedTime();
  let t = time % 5;
  // cube.rotation.x = t * 1;
  // cube.rotation.y = t * 1;
  // cube.position.x = t * 1;
  if (cube.position.x > 5) {
    cube.position.x = 0;
  }

  renderer.render(scene, camera);
}

animate();
</script>
